<template>
  <div class="w1300">
    <div class="flex-xbt">
      <h2>成员</h2>
      <div class="flex-yc">
        <el-button type="primary" @click="onEditRole" link>添加角色</el-button>
        <el-button type="primary" @click="onAddMember">添加成员</el-button>
      </div>
    </div>
    <table-comp
      :column="memberTableColumn"
      :list="memberList"
      :total="totalVal"
      :pageSize="params.pageSize"
    >
      <template v-slot:userinfo="{ row }">
        <div class="flex user-info">
          <el-image fit="contain" class="avatar"></el-image>
          <div class="info flex-y">
            <span class="flex-yc">
              <b style="margin-right: 5px">{{ row.name }}</b>
              {{ ['', '男', '女'][row.sex] }} 26岁
            </span>
            <span class="flex-yc">
              <p style="margin-right: 5px">{{ row.university }}</p>
              {{ row.edu }}
            </span>
          </div>
        </div>
      </template>
      <template v-slot:handler="{ row }">
        <el-button type="primary" link @click="onEditMember(row)">
          编辑
        </el-button>
        <el-button type="danger" link @click="onDelMember(row.id)">
          删除
        </el-button>
      </template>
    </table-comp>

    <dialog-comp
      :title="(memberAddData.id ? '编辑' : '添加') + '成员'"
      width="500"
      v-model="isAddMember"
      @onSubmit="onAddMemberSubmit"
      @onClose="onCloseMember"
    >
      <form-comp
        labelWidth="70"
        :form-item="memberFormItem"
        v-model:formData="memberAddData"
      ></form-comp>
    </dialog-comp>
    <dialog-comp
      title="添加角色"
      width="500"
      v-model="isAddMemberRole"
      @onSubmit="onAddMemberRoleSubmit"
      @onClose="onAddMemberRoleSubmit"
    >
      <form-comp
        labelWidth="70"
        :form-item="memberRoleItem"
        v-model:formData="memberRoleData"
      ></form-comp>
    </dialog-comp>
  </div>
</template>

<script setup lang="ts">
import TableComp from '@/components/table/index.vue'
import DialogComp from '@/components/dialog/index.vue'
import FormComp from '@/components/form/form.vue'
import { onMounted, reactive, ref } from 'vue'
import { useAddMember } from '@/pages/topic/views/member/addMember.ts'
import {
  reqCreateMember,
  reqCreateMemberRole,
  reqDeleteMember,
  reqGetMemberListPage,
  reqUpdateMember,
} from '@/pages/topic/api/member.ts'
import { MsgConfirmAsync, MsgError, MsgSuccess } from '@/utils/utils.ts'
import {
  reqGetMemberParams,
  reqMemberBody,
} from '@/pages/topic/api/types/member.ts'

let {
  memberTableColumn,
  memberAddData,
  memberFormItem,
  memberRoleItem,
  memberRoleData,
} = useAddMember()

const reqMemberData = JSON.parse(JSON.stringify(memberAddData)) as reqMemberBody

onMounted(() => {
  getMemberListPage()
})

const params = reactive<reqGetMemberParams>({
  pageNo: 1,
  pageSize: 10,
  id: 1,
})
const totalVal = ref<number>(0)
const memberList = ref([])
const getMemberListPage = async () => {
  const {
    code,
    data: { list, total },
  } = await reqGetMemberListPage(params)
  if (code === 0) {
    memberList.value = list
    totalVal.value = total
  }
}

const isAddMember = ref<boolean>(false)
const isAddMemberRole = ref<boolean>(false)

// 添加角色
const onEditRole = () => {
  isAddMemberRole.value = true
}

const onAddMember = () => {
  isAddMember.value = true
}

const onEditMember = (member: reqMemberBody) => {
  isAddMember.value = true
  for (const memberKey in member) {
    memberAddData[memberKey] = member[memberKey]
  }
  console.log(memberAddData, 777)
}

const onDelMember = async (id: string) => {
  if (await MsgConfirmAsync('你确定删除吗?')) {
    const { data } = await reqDeleteMember(id)
    if (data === 'success') {
      getMemberListPage()
      MsgSuccess('删除成功')
    } else MsgError('删除失败')
  }
}

const onCloseMember = () => {
  for (const memberKey in memberAddData) {
    memberAddData[memberKey] = reqMemberData[memberKey]
  }
}
const onAddMemberSubmit = async () => {
  memberAddData.age = +memberAddData.age
  console.log(memberAddData)
  let resp
  if (memberAddData.id) resp = await reqUpdateMember(memberAddData)
  else resp = await reqCreateMember(memberAddData)
  const { code, data, msg } = resp
  if (code === 0 && data === 'success') {
    MsgSuccess('保存成功')
    isAddMember.value = false
  } else MsgError(msg || '保存失败')
}

const onAddMemberRoleSubmit = async () => {
  const { code, data, msg } = await reqCreateMemberRole(memberRoleData.value)
  if (code === 0 && data === 'success') {
    MsgSuccess('添加成功')
    isAddMemberRole.value = false
  } else MsgError(msg || '添加失败')
}
</script>

<style scoped lang="scss">
.w1300 {
  .flex-xbt {
    padding: 42px 0 20px;
    align-items: flex-end;
    h2 {
      font-size: 32px;
      color: #333;
      font-weight: bold;
    }
  }
  .user-info {
    .avatar {
      width: 60px;
      height: 60px;
      margin-right: 5px;
    }
    .info {
      justify-content: space-around;
      span {
        font-size: 12px;
        color: #999;
        b {
          font-size: 14px;
          color: #333;
        }
        p {
          color: #333;
        }
      }
    }
  }
}
</style>
